<!--
 * @Description: 工序维护
 * 
 * @Author: XiongYaoYuan<xiongyaoyuan>
 * @Date: 2023-06-05 17:09:35
 * @FilePath: /yuxiuproweb/src/views/process/vm/mods/process/index.vue
-->
<template>
  <el-drawer title="工序维护" size="100%" :visible.sync="shows">
    <div class="process-view">
      <div
        class="process-item"
        v-for="item in this.processList"
        :key="item.processId"
      >
        <div class="process-item-title">{{ item.name }}</div>
        <div class="process-item-cells">
          <div
            class="process-cell"
            v-for="cell in item.children"
            :key="cell.processId"
          >
            <div class="process-cell-title">{{ cell.name }}</div>
            <div class="process-cell-input">
              <el-input-number
                v-model="cell.arr1"
                controls-position="right"
                size="mini"
                :min="0"
                :precision="0"
                style="width: 100%"
              ></el-input-number>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="process-footer">
      <el-button type="primary" @click="submitProcess">保存</el-button>
      <el-button @click="shows = false">取消</el-button>
    </div>
  </el-drawer>
</template>

<script>
import {
  listProcess,
  addProductProcess,
  listProductProcess,
} from "@/api/process/production";
import { delDepartTree } from "@/views/process/production/helper.js";
export default {
  props: {
    show: Boolean,
    type: {
      type: String,
    },
    productId: {
      type: String | Number,
    },
  },
  data() {
    return {
      processList: [],
      productProcessSubmitList: [],
    };
  },
  computed: {
    shows: {
      get() {
        return this.show;
      },
      set(newValue) {
        this.$emit("update:show", newValue);
      },
    },
  },
  async created() {
    await this.getProductProcessSubmitList();
    this.getProcessList();
    this.getProductProcessList();
  },
  methods: {
    /** 查询工序模型列表 */
    getProcessList() {
      listProcess({
        pageNum: 1,
        pageSize: 5000,
      }).then(({ rows }) => {
        this.processList = delDepartTree(
          rows.map((e) => ({
            ...e,
            processId: `${e.processId}`,
            arr1: 0,
          }))
        );
      });
    },

    // 查询
    getProductProcessList() {
      listProcess({
        pageNum: 1,
        pageSize: 5000,
      }).then(({ rows }) => {
        this.processList = delDepartTree(
          rows.map((e) => ({
            ...e,
            processId: `${e.processId}`,
            arr1:
              this.ProductProcessSubmitList?.find(
                (v) => `${v.processId}` === `${e.processId}`
              )?.arr1 || 0,
            productProcessId:
              this.ProductProcessSubmitList?.find(
                (v) => `${v.processId}` === `${e.processId}`
              )?.productProcessId || "",
          }))
        );
      });
    },

    // 查询保存的数据
    async getProductProcessSubmitList() {
      try {
        const { rows } = await listProductProcess({
          type: this.type,
          productId: this.productId,
        });
        this.ProductProcessSubmitList = rows || [];
      } catch (e) {
        console.log(e);
      }
    },

    /** 保存 */
    submitProcess() {
      let submitProcessList = [];
      this.processList?.forEach((e) => {
        if (e?.children?.length) {
          e?.children?.forEach((v) => {
            submitProcessList.push(v);
          });
        }
      });
      const productProcessList = submitProcessList?.map((e) => {
        return {
          arr1: e.arr1,
          type: this.type,
          productProcessId: e.productProcessId,
          productId: this.productId,
          processId: e.processId,
        };
      });
      addProductProcess(productProcessList).then((res) => {
        this.$modal.msgSuccess("保存成功");
        this.shows = false;
      });
    },
  },
};
</script>

<style scoped lang="scss">
.process-view {
  width: 100%;
  padding: 0 10px;
  display: flex;
  align-items: flex-start;
  overflow-y: hidden;
  flex-wrap: nowrap;
  .process-item {
    width: 110px;
    text-align: center;
    border-radius: 5px;
    background-color: #eee;
    margin-right: 10px;
    padding: 5px;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.16);
    list-style: none;
    white-space: nowrap;
    &-title {
      font-size: 16px;
      font-weight: bold;
      padding: 5px 0;
    }
    &-cells {
      width: 100px;
      .process-cell {
        background-color: #fff;
        padding: 5px;
        border-radius: 5px;
        margin-bottom: 5px;
        &:last-child {
          margin-bottom: 0;
        }
        &-title {
          font-size: 13px;
        }
        &-input {
          margin-top: 5px;
        }
      }
    }
  }
}
.process-footer {
  width: 100%;
  text-align: center;
  margin: 20px 0;
}
</style>
